<template>
  <div class="map-comp">
    <div class="left">
      <BmapScatter></BmapScatter>
    </div>
    <div class="right">
      <el-card shadow="hover">
        <template #header>订单同比增长</template>
        <LiquidFill></LiquidFill>
      </el-card>
      <el-card shadow="hover">
        <template #header>热门搜索</template>
        <WordCloud> </WordCloud>
      </el-card>
    </div>
  </div>
</template>

<script>
import BmapScatter from "./BmapScatter.vue";
import LiquidFill from "./LiquidFill.vue";
import WordCloud from "./WordCloud.vue";

export default {
  components: {
    BmapScatter,
    LiquidFill,
    WordCloud,
  },
};
</script>

<style scoped lang="scss">
.map-comp {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  .left {
    flex: 0 0 78%;
    height: 600px;
    position: relative;
  }
  .right {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    :deep(.el-card__body) {
      height: 200px;
    }
    :deep(.el-card__header) {
      font-weight: 600;
    }
  }
}
</style>
